<script lang="ts">
    import { onMount } from 'svelte';
    import { navigate } from 'svelte-routing';
    import { writable } from 'svelte/store';
    import { formatDate } from '../../utils/time';
    import { get, post } from '../../utils/api';
    import { addToast } from '../../stores/toastStore';
    import Header from '../../components/garage/Header.svelte';

    const formData = writable({
        name: 'Hero', // 姓名
        phone: '17371086562', // 手机号
        email: 'beherochuling@163.com', // 邮箱
    });
    
    const handleSubmit = async () => {
        const data = $formData;

        try {
            const result = await post('/setting', data);

            addToast('操作成功', 'info', 3000);
        } catch (error) {
            addToast('操作失败'+error, 'error', 3000);
        }
    };

    onMount(() => {
    });
</script>

<main>
    <Header title="设置" />
    <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm">
        <div class="form-group mb-4">
            <label class="text-gray-600">姓名</label>
            <input type="text" class="input-field" placeholder="姓名" bind:value={$formData.name}>
        </div>
        <div class="form-group mb-4">
            <label class="text-gray-600">手机号</label>
            <input type="text" class="input-field" placeholder="手机号" bind:value={$formData.phone}>
        </div>
        <div class="form-group mb-4">
            <label class="text-gray-600">邮箱</label>
            <input type="text" class="input-field" placeholder="邮箱" bind:value={$formData.email}>
        </div>

        <div class="flex justify-end mt-4">
            <button class="bg-blue-500 text-white px-4 py-2 rounded shadow-sm" on:click={handleSubmit}>提交</button>
        </div>
    </div>
</main>

<style lang="scss">
  .form-group {
    display: flex;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
    &:last-child {
      border-bottom: none;
    }
    label {
      flex: 0 0 100px;
      margin-right: 1rem;
    }
    input, textarea, select {
      flex: 1;
      border: none; // 去除 input 的边框
      padding: 0.5rem; // 添加内边距
      background-color: #f9fafb; // 设置背景颜色
      &:focus {
        outline: none; // 去除 focus 的边框
      }
    }
  }
  .form-group .flex.items-center label {
    margin-right: 2rem;
  }

  .input-area {
    border: 1px solid #ccc;
    padding: 8px;
    cursor: pointer;
  }
</style>
